<template>
  <div class="about" theme-mode="dark">
    <t-navbar
      :title="sectionInfo.title"
      :fixed="false"
      left-arrow
      @left-click="handleClick"
    />
    <div class="epub-container" v-html="sectionInfo.content"></div>
  </div>
</template>

<script>
export default {
  name: "EpubReader",
};
</script>

<script setup>
import request from "@/utils/request";
import { onMounted, ref, watch } from "vue";
const sectionInfo = ref({
  content: "",
});

const content = ref("");

function handleClick() {
  // window.history.back();
}

onMounted(() => {
  request.get("api/bookSection/detail/1867919421401538565").then((res) => {
    console.log(res);
    sectionInfo.value = res;
    content.value = res.content;
  });
});
</script>

<style scoped>
.about {
  width: 100%;
  min-height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: var(--td-bg-color-container);
}

/* 平板设备 */
@media screen and (max-width: 768px) {
  .about {
    padding: 10px;
  }
}

/* 移动设备 */
@media screen and (max-width: 480px) {
  .about {
    padding: 5px;
  }
}

.epub-container {
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: justify;
  color: var(--td-text-color-secondary);
  padding-top: 15px;
  padding-bottom: 15px;
  word-break: break-word;
}

/* Optimize image display */
img {
  max-width: 100%;
  height: auto;
  margin: 10px auto;
  display: block;
}
</style>
<style>
.epub-container p {
    padding-top: 6px;
    padding-bottom: 6px;
}
.epub-container h1 {
    font-size: 30px;
}
</style>
